<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="/layout/common_head::commonHeader('管理系统登录页')"></head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-body hstitlewithouttitle">
            <div class="layui-container">
            <br>
            <blockquote class="layui-elem-quote" style="height:30px;">
              <span style="color: red; " th:text="${error}"></span>
            </blockquote>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>后台系统登录
                版本<span th:text="${#httpServletRequest.getServletContext().getAttribute('buildVersion')}"></span>
              </legend>
            </fieldset>

            <div style="padding-top: 15px;">
                <form action="/login" class="layui-form" method="post" id="loginForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="username" th:value="user" autocomplete="off"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" class="layui-input" name="password" th:value="user" autocomplete="off"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-block">
                            <select name="loginType" lay-filter="choiceRole" lay-search="">
                                <option value="super">后台管理员</option>
                                <option value="admin">系统管理员</option>
                                <option value="user" selected="">普通用户</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="" title="记住我" />
                        </div>
                    </div>

                    <div class="layui-form-item" th:if="${session.showValidateCode}">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="validateCode" value="" autocomplete="off"/>
                         </div>
                    </div>

                    <div class="layui-form-item" th:if="${session.showValidateCode}">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <img onclick="this.src=('/code/image?reload='+(new Date()).getTime())" src="/code/image" width="85" height="38"
                                 border="1" alt="验证码"/>
                         </div>
                    </div>

                     <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <!--<input class="layui-btn" type="button" id="asyncLogin" value="异步登录"/>-->
                        <input class="layui-btn" type="submit"  value="表单登录"/>
                        <!--<input class="layui-btn" type="button" id="adminUser" value="获取用户(测试)"/>-->
                    </div>
                </form>
            </div>
            </div>
        </div>

        <div th:include="/layout/footer::footer">
        </div>
        <!--
        https://blog.csdn.net/mygzs/article/details/52668099
        https://www.cnblogs.com/taiguyiba/p/6130293.html
        https://www.cnblogs.com/mengzhen123/p/5968831.html
        -->
    </div>
    <script th:replace="/layout/common_js::onloadjs"></script>

    <script type="text/javascript">
    	layui.use(['element','form','layer','jquery'], function() {
    		var element = layui.element,
                form = layui.form,
    		    layer = layui.layer,
    		    $ = layui.jquery;
    		
    		layer.config({
                title: ['操作提示', 'font-size:14px;'],
                closeBtn: 0,
                time: 0,
                anim: 1,
                scrollbar: false
            });
    		
    		//异步登录
    		$("#loginForm input[id='asyncLogin']").on('click',function(){
    			 var username = "user";// $("input[name='username']").val();
    			 $.post('/login',{username:username, password:'user'}, function (res) {
    	               console.log(res);
    	               if(res.code==0){
    	                   window.location.href = res.forwardPath;
    	               }else {
    	            	   layer.alert(res.message, {
                               icon: 5,
                               skin: 'layer-ext-moon'
                           });
    	               }
    	           });
    		});

    		form.on('select(choiceRole)', function (event) {
                if(event.value==='super') {
                   $("#loginForm input[name='username']").val('super');
                }else if(event.value==='admin') {
                    $("#loginForm input[name='username']").val('admin');
                }else if(event.value==='user') {
                    $("#loginForm input[name='username']").val('user');
                }else {
                    console.log('other');
                }
            });
    		
    		//直接获取用户信息 测试
    		$("#loginForm input[id='adminUser']").on('click',function(){
    			$.post('/admin/user/1',function (res) {
   	               console.log(res);
   	            });
    		});
    		
    	});
    </script>
</body>
</html>
